<template>
	<view>
		<view class="container">
			<!-- <scroll-view class="scroll" scroll-y="true"> -->
			<view class="">
				<view class="groups" v-for="(item,index) in goodsList" :key="item.id">
					<!-- <view class="wanl-you-like" :style="{ backgroundImage: 'url(' + $wanlshop.appstc('/common/guess_you_like_it.png') + ')' }"></view> -->
					<view class="groups-title">{{item.title}}</view>

					<view class="goods-list">
						<view class="goods" v-for="(goods,index) in item.data" :key="goods.id">
							<view class="image">
								<image :src="goods.image" mode="widthFix"></image>
							</view>

							<view class="right">
								<view class="name">{{goods.name}}</view>
								<view class="sku">{{goods.sku}}</view>

								<view class="bottom">
									<view class="price-box">
										<view class="price active">
											加购价￥<span>{{goods.discount_price}}</span>
										</view>
										<view class="price">
											￥{{goods.price}}
										</view>
									</view>

									<view class="select" v-if="!goods.select"
										@tap="select_handle($event, goods.id , index)"><text>选择</text></view>
									<view class="select cancel" v-else @tap="cancel_handle($event, goods.id , index)">
										<text>取消</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- </scroll-view> -->

			<view class="foot">
				<view class="text">
					<view class="title">已满<span>1.00</span>元，可低价加购<span>1</span>件商品</view>
					<text>已选{{selected}}/1</text>
				</view>
				<div class="image">
					<image src="../../static/images/tabbar/cart.png" mode="widthFix"></image>
					<view class="tag">
						<span>1</span>
					</view>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected: 0,
				goodsList: [{
						id: 1,
						title: '满1元可加购',
						data: [{
								id: 1,
								image: '../../static/test/popular/p2.png',
								name: '钠基矿石猫砂',
								price: '39.00',
								discount_price: '20.00',
								sku: '2kg',
								select: false
							},
							{
								id: 2,
								image: '../../static/test/popular/p2.png',
								name: '钠基矿石猫砂',
								price: '39.00',
								discount_price: '20.00',
								sku: '2kg',
								select: false
							},
							{
								id: 3,
								image: '../../static/test/popular/p2.png',
								name: '钠基矿石猫砂',
								price: '39.00',
								discount_price: '20.00',
								sku: '2kg',
								select: false
							}
						]
					},
					{
						id: 2,
						title: '满70元可加购',
						data: [{
								id: 4,
								image: '../../static/test/popular/p2.png',
								name: '钠基矿石猫砂',
								price: '39.00',
								discount_price: '20.00',
								sku: '2kg',
								select: false
							},
							{
								id: 5,
								image: '../../static/test/popular/p2.png',
								name: '钠基矿石猫砂',
								price: '39.00',
								discount_price: '20.00',
								sku: '2kg',
								select: false
							}
						]
					}
				]
			};
		},

		methods: {
			// 选中商品
			select_handle(e, id, index) {
				// console.log('e',e)
				// console.log('id',id)
				// console.log('index',index)
				this.goodsList.forEach(item => {
					item.data.forEach(goods => {
						// 取消所有选中
						goods.select = false;
						// 设置当前选中
						if (goods.id == id) {
							goods.select = true
						}
					})
				})
				this.SET_selected();
			},

			// 取消当前选中
			cancel_handle(e, id, index) {
				this.goodsList.forEach(item => {
					item.data.forEach(goods => {
						if (goods.id == id) {
							goods.select = false
						}
					})
				})
				this.SET_selected();
			},

			// 统计当前选中商品数量
			SET_selected() {
				let num = 0;
				this.goodsList.forEach(item => {
					item.data.forEach(goods => {
						if (goods.select) {
							num++;
						}
					})
				})
				this.selected = num;
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fafafa;
		position: relative;
		height: 100%;
	}

	.container {
		padding-bottom: 110rpx;

		.groups {
			width: 100%;
			box-sizing: border-box;
			text-align: center;

			.groups-title {
				margin: 40rpx auto;
			}

			.goods-list {
				background-color: #ffffff;
				border-radius: 8rpx;
				box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
				padding: 0 34rpx;
				box-sizing: border-box;
				margin: 0 20rpx;

				.goods {
					width: 100%;
					border-bottom: 2rpx solid #E5E5E5;
					padding: 40rpx 0;
					box-sizing: border-box;
					display: flex;
					gap: 30rpx;

					&:last-child {
						border-bottom: unset;
					}

					.image {
						width: 160rpx;
						height: 160rpx;
						box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
						border-radius: 8rpx;
						overflow: hidden;

						image {
							width: 100%;
							display: block;
						}
					}

					.right {
						flex: 1;
						text-align: left;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							font-size: 30rpx;
							color: #3D3D3D;
							margin-bottom: 6rpx;
						}

						.sku {
							font-size: 24rpx;
							color: #737373;
						}

						.bottom {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price-box {
								display: flex;
								align-items: center;
								gap: 12rpx;

								.price {
									font-size: 26rpx;
									color: #B3B3B3;
									text-decoration: line-through;

									&.active {
										color: #FF4646;
										text-decoration: none;

										span {
											font-size: 36rpx;
											font-weight: bold;
										}
									}
								}
							}

							.select {
								font-size: 26rpx;
								color: #11E195;
								border: 2rpx solid #11E195;
								padding: 4rpx 26rpx;
								border-radius: 604rpx;

								&.cancel {
									border-color: #B3B3B3;
									color: #B3B3B3;
								}
							}
						}
					}
				}
			}
		}

		.foot {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #ffffff;
			box-shadow: 0 -20rpx 30rpx -40rpx #737373;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			padding-bottom: 28rpx;

			.text {
				display: flex;
				align-items: center;
				gap: 20rpx;
				font-size: 26rpx;

				.title {
					color: #3D3D3D;

					span {
						color: #FF4646;
					}
				}

				text {
					color: #11E195;
				}
			}

			.image {
				width: 50rpx;
				height: 50rpx;
				position: relative;

				image {
					width: 100%;
					display: block;
				}

				.tag {
					display: block;
					position: absolute;
					top: -8rpx;
					right: 0rpx;
					border-radius: 26rpx;
					background-color: #FF4646;
					color: #ffffff;
					font-size: 22rpx;
					width: 26rpx;
					height: 26rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>